<template>
  <footer>
    <div class="item">
      <img :src="$route.path.includes('/home') ? iconList[0].Unchecked :iconList[0].checked" alt>
      <span @click="switchTo('/home')" :class="{on:$route.path.includes('/home')}">首页</span>
    </div>
    <div class="item">
      <img
        :src="$route.path.includes('/recommend') ? iconList[1].Unchecked :iconList[1].checked"
        alt
      >
      <span @click="switchTo('/recommend')" :class="{on:$route.path.includes('/recommend')}">推荐</span>
    </div>
    <div class="item">
      <img :src="$route.path.includes('/search') ? iconList[2].Unchecked :iconList[2].checked" alt>
      <span @click="switchTo('/search')" :class="{on:$route.path.includes('/search')}">搜索</span>
    </div>
    <div class="item">
      <img :src="$route.path.includes('/chat') ? iconList[3].Unchecked :iconList[3].checked" alt>
      <span @click="switchTo('/chat')" :class="{on:$route.path.includes('/chat')}">聊天</span>
    </div>
    <div class="item">
      <img :src="$route.path.includes('/me') ? iconList[4].Unchecked :iconList[4].checked" alt>
      <span @click="switchTo('/me')" :class="{on:$route.path.includes('/me')}">个人中心</span>
    </div>
    <!-- $route.path.includes('/home') ? iconList[0].Unchecked :iconList[0].checked -->
  </footer>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      iconList: [
        {
          checked: "static/img/home1.png",
          Unchecked: "static/img/home.png"
        },
        {
          checked: "static/img/tui1.png",
          Unchecked: "static/img/tui.png"
        },
        {
          checked: "static/img/search1.png",
          Unchecked: "static/img/search.png"
        },
        {
          checked: "static/img/tui1.png",
          Unchecked: "static/img/tui.png"
        },
        {
          checked: "static/img/me.png",
          Unchecked: "static/img/me.png"
        }
      ]
    };
  },
  computed: {},
  methods: {
    switchTo(path) {
      this.$router.replace(path);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped lang="">
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffff;
}
footer .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 3px;
}
.item img {
  width: 0.613333rem;
  height: 0.6133333rem;
  margin-bottom: 5px;
}
.on {
  color: red;
}
</style>
